import { useState } from 'react';
import AIEditor from "@/components/AIEditor"
import { cn } from '@/utils/cn';

function App() {
  const [code, setCode] = useState<string>(`function main() {\n  console.log("Hello, world!");\n}`);
  const [theme, setTheme] = useState<'light' | 'vs-dark'>('vs-dark');
  const [language, setLanguage] = useState<string>('javascript');

  // 语言选项配置
  const languageOptions = [
    { value: 'javascript', label: 'JavaScript', defaultCode: 'console.log("Hello, JavaScript!");' },
    { value: 'typescript', label: 'TypeScript', defaultCode: 'const message: string = "Hello, TypeScript!";\nconsole.log(message);' },
    { value: 'python', label: 'Python', defaultCode: 'def main():\n    print("Hello, Python!")\n\nif __name__ == "__main__":\n    main()' },
    { value: 'cpp', label: 'C++', defaultCode: '#include <iostream>\n\nint main() {\n    std::cout << "Hello, C++!" << std::endl;\n    return 0;\n}' },
    { value: 'java', label: 'Java', defaultCode: 'public class Main {\n    public static void main(String[] args) {\n        System.out.println("Hello, Java!");\n    }\n}' },
    { value: 'go', label: 'Go', defaultCode: 'package main\n\nimport "fmt"\n\nfunc main() {\n    fmt.Println("Hello, Go!")\n}' },
    { value: 'rust', label: 'Rust', defaultCode: 'fn main() {\n    println!("Hello, Rust!");\n}' },
    { value: 'html', label: 'HTML', defaultCode: '<!DOCTYPE html>\n<html>\n<head>\n    <title>Hello, HTML!</title>\n</head>\n<body>\n    <h1>Hello, HTML!</h1>\n</body>\n</html>' },
    { value: 'css', label: 'CSS', defaultCode: 'body {\n    font-family: Arial, sans-serif;\n    background-color: #f0f0f0;\n}\n\nh1 {\n    color: #333;\n    text-align: center;\n}' },
    { value: 'json', label: 'JSON', defaultCode: '{\n  "message": "Hello, JSON!",\n  "version": "1.0",\n  "active": true\n}' }
  ];

  // 切换语言时更新默认代码
  const handleLanguageChange = (newLanguage: string) => {
    const selectedLang = languageOptions.find(lang => lang.value === newLanguage);
    if (selectedLang) {
      setLanguage(newLanguage);
      setCode(selectedLang.defaultCode);
    }
  };

  return (
    <div className='w-full p-8 flex flex-col gap-4'>
      {/* 控制面板 */}
      <div className={cn(
        "flex flex-col gap-4 p-4 rounded-lg border",
        "bg-gray-50 shadow-sm"
      )}>
        {/* 语言切换器 */}
        <div className="flex gap-4 items-center">
          <span className="text-lg font-medium">选择语言:</span>
          <select
            value={language}
            onChange={(e) => handleLanguageChange(e.target.value)}
            className={cn(
              "px-3 py-2 border border-gray-300 rounded-md",
              "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
              "transition-colors duration-200"
            )}
          >
            {languageOptions.map((lang) => (
              <option key={lang.value} value={lang.value}>
                {lang.label}
              </option>
            ))}
          </select>
        </div>

        {/* 主题切换器 */}
        <div className="flex gap-4 items-center">
          <span className="text-lg font-medium">选择主题:</span>
          <button
            onClick={() => setTheme('light')}
            className={cn(
              "px-4 py-2 rounded transition-colors duration-200",
              theme === 'light' 
                ? 'bg-blue-500 text-white shadow-md' 
                : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
            )}
          >
            Light Theme
          </button>
          <button
            onClick={() => setTheme('vs-dark')}
            className={cn(
              "px-4 py-2 rounded transition-colors duration-200",
              theme === 'vs-dark' 
                ? 'bg-blue-500 text-white shadow-md' 
                : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
            )}
          >
            Dark Theme
          </button>
        </div>
      </div>

      {/* 编辑器容器 */}
      <div className='flex flex-row gap-4'>
        <div className="flex-1">
          <h3 className="mb-2 text-lg font-medium">
            主编辑器 - {languageOptions.find(lang => lang.value === language)?.label}
          </h3>
          <AIEditor 
            language={language}
            value={code} 
            onChange={(value) => setCode(value || "")}
            height="70vh" 
            theme={theme}
          />
        </div>
        
        <div className="flex-1">
          <h3 className="mb-2 text-lg font-medium">
            预览编辑器（只读） - {languageOptions.find(lang => lang.value === language)?.label}
          </h3>
          <AIEditor 
            language={language}
            value={code} 
            height="70vh"
            theme={theme}
            options={{ readOnly: true }}
          />
        </div>
      </div>
    </div>

  )
}

export default App
